<template>
    <div class="import-class-student">
        <el-dialog
            class="dialog-history"
            title="授课班级导入"
            :close-on-click-modal="false"
            :visible.sync="dialog"
            width="660px"
        >
            <div class="dialog-content">
                <el-form :model="form" ref="historyForm" @submit.native.prevent>
                    <el-form-item label="选择班级：">
                        <el-cascader
                            :options="form.optionsClass"
                            :props="config"
                            v-model="form.optionsClassValue"
                            :show-all-levels="false"
                            @change="selectChange"
                        ></el-cascader>
                    </el-form-item>
                </el-form>
                <div class="select-all">
                    <div class="select-all-title">
                        <el-checkbox
                            :checked="isCheckedAll"
                            v-model="checkAllFlag"
                            :disabled="firstDisabled"
                            @change="checkAll"
                        >
                            全选
                        </el-checkbox>
                    </div>
                    <div class="select-all-list">
                        <el-checkbox-group
                            v-model="checkModel"
                            @change="handleChecked"
                        >
                            <el-checkbox
                                v-for="(item, index) in selectAll"
                                :label="item.sysStuId"
                                :key="item.sysStuId"
                                class="item-check"
                                :disabled="item.exist"
                            >
                                {{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button
                    class="button-style"
                    :loading="loading"
                    :disabled="firstDisabled"
                    @click="save"
                >
                    保 存
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { searchClass, searchClassStudent, importClassStudent } from '../../../../../api/importClass';
export default {
    data() {
        return {
            loading: false,
            dialog: false,
            courseId: null,
            concludeId: null,
            classId: null,
            config: {
                value: "id",
                label: "name",
            },
            selectAll: [],
            firstDisabled: false,
            isCheckedAll: false,
            checkAllFlag: false,
            checkModel: [], //选中数组
            CheckedAllArr: [],//全选数组
            form: {
                optionsClassValue: [],
                optionsClass: []
            },
        }
    },
    methods: {
        formatKey(data) {

            const list = [];
            data.forEach((item, index) => {
                const { name, children, id } = item;
                let child = [];
                if (children) {
                    child = this.formatKey(children);
                    list.push({
                        name,
                        id: id || index,
                        children: child
                    })
                } else {
                    list.push({
                        name,
                        id: id || index
                    })
                }

            });

            return list;
        },
        init(data) {
            const { courseId, concludeId } = data;
            this.courseId = courseId;
            this.concludeId = concludeId;
            this.dialog = true;
            this.CheckedAllArr.length = 0;
            this.checkModel.length = 0;
            this.selectAll.length = 0;
            this.checkAllFlag = false;
            this.form.optionsClassValue.length = 0;
            this.firstDisabled = false;
            searchClass(courseId, {
                allFlag: false,
                defaultClassFlag: true
            }).then((res) => {
                this.form.optionsClass = this.formatKey(res.data);
            });
        },

        selectChange(arr) {
            this.classId = arr[arr.length - 1];
            const checkModel = [];
            const CheckedAllArr = [];
            let type = true;
            searchClassStudent({
                classId: this.classId,
                concludeId: this.concludeId
            }).then((res) => {
                if (res.data.length) {
                    res.data.forEach((item) => {
                        CheckedAllArr.push(item.sysStuId);
                        if (item.exist) {
                            checkModel.push(item.sysStuId);
                        } else {
                            type = false;
                        }
                    });
                    this.CheckedAllArr = CheckedAllArr;
                    this.checkModel = checkModel;
                    this.checkAllFlag = type;
                    this.firstDisabled = type;
                } else {
                    this.CheckedAllArr = CheckedAllArr;
                    this.checkModel = checkModel;
                    this.checkAllFlag = false;
                };
                this.selectAll = res.data;
            });
        },

        checkAll(type){
            const arr = [];
            if (!type) {
                this.selectAll.forEach((item) => {
                    if (item.exist) {
                        arr.push(item.sysStuId)
                    }
                });
            };

            this.checkModel = type ? this.CheckedAllArr : arr;
        },

        save() {
            if (!this.checkModel.length) {
                this.$message.error('请选择导入学生');
                return false;
            }
            this.loading = true;
            importClassStudent({
                classId: this.classId,
                concludeId: this.concludeId,
                studentIds: this.checkModel
            }).then((res) => {
                this.loading = false;
                this.$message.success('导入成功');
                this.dialog = false;
                this.$emit('refresh');
            }).catch(() => {
                this.loading = false;
            });
        },
        //单选
        handleChecked(){
            this.isCheckedAll = this.checkModel.length == this.selectAll.length;
            this.checkAllFlag = this.checkModel.length == this.selectAll.length;
        },
    }
}
</script>
<style lang="scss">
.import-class-student {
    .el-input__inner {
        width: 180px;
    }
    .el-dialog__footer {
        text-align: center;
    }
    .item-check {
        margin-bottom: 20px !important;
    }
}

</style>
<style lang="scss" scoped>
@import "../../../../../styles/layout/_color_variables.scss";
.import-class-student {
    .dialog-history{
        .el-dialog__body{
            padding: 40px 65px;
        }
        .content-select{
            height: 32px;
            line-height: 32px;
            .select-title{
                float: left;
                font-size: 18px;
                color: #385899;
            }
            .select-box{
                float: right;
                .el-input{
                    float: left;
                    width: 180px;
                    input{
                        width: 100%;
                    }
                }
                .button-style{
                    width: 90px;
                    text-align: center;
                    margin-left: 20px;
                }
            }
        }
        .content-list{
            width: 100%;
            max-height: 300px;
            overflow-y: scroll;
            margin-top: 20px;
            padding-right: 10px;
            &::-webkit-scrollbar {
                width: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background: #6589ae
            }
            .list-item{
                margin-top: 20px;
                padding: 15px 18px 0;
                border: solid 1px #dbdbdb;
                border-radius: 3px;
                &:first-child{
                    margin-top: 0;
                }
                &.active{
                    border-color: #1277eb;
                }
            }
            .item-title{
                overflow: hidden;
                height: 58px;
                .title-left-heading{
                    font-size: 16px;
                    color: $title-gray;
                }
                .title-left-text{
                    margin-top: 10px;
                    span{
                        font-size: 14px;
                        color: $table-gray;
                        margin-right: 25px;
                        &:last-child{
                            color: $blue;
                            cursor: pointer;
                        }
                    }
                }
            }
            .title-right{
                line-height: 53px;
                font-size: 14px;
                color: $btn-blue;
                cursor: pointer;
                i{
                    margin-left: 4px;
                }
            }
            .item-content{
                padding-top: 18px;
                border-top: solid 1px #d9d9d9;
                overflow: hidden;
                span{
                    float: left;
                    width: 20%;
                    text-align: center;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-bottom: 24px;
                }
            }
        }
        .history-tips{
            text-align: center;
            margin-top: 50px;
            font-size: 16px;
        }
        // 二期新增样式
        .el-cascader{
            width: 180px;
            line-height: 32px;
            input{
                width: 180px;
            }
        }
        .select-all{
            .select-all-title{
                border-bottom: solid 1px #e8e8e8;
                padding-bottom: 19px;
            }
            .select-all-list{
                margin-top: 10px;
                padding: 0 2px;
                max-height: 200px;
                overflow-y: scroll;
                &::-webkit-scrollbar {
                    width: 5px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #c0c0c0
                }
                .el-checkbox{
                    width: 68px;
                    margin:0 30px;
                    .el-checkbox__input{
                        float: left;
                        margin-top: 12px;
                    }
                    .el-checkbox__label{
                        float: left;
                        width: 43px;
                        line-height: 36px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }
                }
            }
        }
    }
}

</style>
